<template lang="pug">
  span(v-if="labelEdit!==one.name" :title="one.label" @dblclick="labelClick") {{one.label}}
  el-input.label-input(v-else ref="labelInput" v-model="one.label" @blur="blurLabelInput" size="small" @keydown.native.stop="")
</template>
<script>
export default {
  props: ['one', 'disabledName'],
  data() {
    return {
      labelEdit: ''
    }
  },
  methods: {
    labelClick() {
      // 首页不能编辑
      if (this.one.name === this.disabledName) {
        return false
      }
      this.labelEdit = this.one.name
      setTimeout(() => {
        let refs = this.$refs['labelInput']
        refs.focus()
      })
    },
    blurLabelInput() {
      this.labelEdit = ''
    }
  }
}
</script>
<style lang="scss" scoped>
  .label-input {
    // height: 28px;
    // line-height: 29px;
    // border: 1px solid rgb(204, 204, 204);
    // border-radius: 3px;
    // padding: 0px 6px;
    width: 110px;
  }
</style>
